<template>
	<view class="partyInfoWp">
		<view class="bgImg">
			<u-image src="https://file.casugn.com/storecompcard/temp/组局bg@2x_1682302473174.png" width="750rpx"
				height="500rpx"></u-image>
		</view>
		<u-status-bar></u-status-bar>
		<!-- 自定义导航 -->
		<u-navbar leftIconColor="#ffffff" title="组局详情" :autoBack="true" bgColor="transparent"
			:titleStyle="{color:'#ffffff'}">
			<view class="u-nav-slot" slot="left">
				<view>
					<u-icon name="arrow-left" size="40" color="#ffffff"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="headWP">
			<view class="partyItemMain">
				<view class="infoItem">
					<u-image width="32rpx" height="32rpx"
						src="https://file.casugn.com/storecompcard//8QgtIUYatKvS354eadb67fdb51a33385a045dbd14498_1682221541636.png"><template
							v-slot:loading>
							<u-loading-icon></u-loading-icon>
						</template></u-image>
					<view class="infoName u-line-1">{{partyInfo.addressName?partyInfo.addressName:''}}</view>
				</view>
				<view class="infoItem">
					<u-image width="32rpx" height="32rpx"
						src="https://file.casugn.com/storecompcard/temp/general／schedule@2x_1682221611794.png"><template
							v-slot:loading>
							<u-loading-icon></u-loading-icon>
						</template></u-image>
					<view class="infoName u-line-1">{{partyInfo.startTime?partyInfo.startTime:''}}</view>
				</view>
				<view class="infoItem">
					<u-image width="32rpx" height="32rpx"
						src="https://file.casugn.com/storecompcard/temp/general／user@2x_1682221627572.png"><template
							v-slot:loading>
							<u-loading-icon></u-loading-icon>
						</template></u-image>
					<view style="color:#276AEE ;" class="infoName">{{partyInfo.initiator?partyInfo.initiator:""}}
					</view>
				</view>
			</view>
			<view class="paddingBar">
			</view>
			<view class="memberWp">
				<view class="memberItemTitleWp">
					<view class="memberItemTitle">
						参与人员
					</view>
					<view class="memberItemNumber">
						<u-button @click="addHandleFromShow" size="mini" color="#276AEE" type="primary" text="添加"
							:plain="true"></u-button>
					</view>
				</view>
				<view class="memberItem" v-for="(item,index) in membersList" :key="index">
					<view class="left">
						<u-image width="80rpx" height="80rpx" :src="item.photo?item.photo:defaultHead" alt="">
						</u-image>
						<view class="userNameWp">
							<view class="userName">
								{{item.userName?item.userName:''}}
							</view>
							<view class="phone">
								{{item.mobile?item.mobile:''}}
							</view>
						</view>
					</view>
					<view class="right" style="margin-right:20rpx" v-if="item.openId!=userInfo.openId"
						@tap="addNextMeetList(item)">

						<view class="text">
							约饭
						</view>
					</view>
					<!-- 回显编辑 -->
					<view v-if="item.openId!=userInfo.openId">
						<view class="right" @click="editRemark(item)" v-if="item.labelId   ">
							<view class="text">
								编辑
							</view>
						</view>
						<!-- 新增 -->
						<view class="right" @click="setRemark(item)" v-if="!item.labelId  ">
							<view class="text">
								备注
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="paddingBar">
			</view>
			<!-- 备注 -->
			<view class="remarkWp">
				<view class="title">
					备注
				</view>
				<view class="content">
					{{partyInfo.remark?partyInfo.remark:''}}
				</view>
			</view>
		</view>
		<u-popup :show="showRemark" @close="showRemark = false" mode="bottom" :round="10">
			<view class="remarkBody">
				<view class="remarkBodytitle">
					好友备注
				</view>
				<view class="personInfo">
					<u-image :src="modelInfo.photo?modelInfo.photo:modelInfo.head" width="80rpx"
						height="80rpx"></u-image>
					<view class="userNameWp">
						<view class="userName">
							{{modelInfo.name?modelInfo.name:modelInfo.userName?modelInfo.userName:''}}
						</view>
						<view class="phone">
							{{modelInfo.moblie?modelInfo.moblie:''}}
						</view>
					</view>
				</view>
				<u--form :model="form" ref="uForm" :rules="rules" labelPosition="top" labelWidth="180"
					errorType="toast">
					<u-form-item label="产品信息：">
						<u-input maxlength="20" v-model="form.societyAbility" border="bottom" placeholder="请输入产品信息" />
					</u-form-item>
					<u-form-item label="人脉资源：">
						<u-input maxlength="20" v-model="form.industryAbility" border="bottom" placeholder="请输入人脉资源" />
					</u-form-item>
					<u-form-item label="其他：">
						<u-input maxlength="30" border="bottom" v-model="form.remarksName" placeholder="请输入备注(30字内)" />
					</u-form-item>
				</u--form>
				<view class="makeSurebutton">
					<u-button type="primary" text="确定" v-if="!isEdit" @tap="submitRemark"></u-button>
					<u-button type="primary" text="修改" v-if="isEdit" @tap="editSubmitRemark"></u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showHandleFrom" :round="20" mode="bottom" @close="showHandleFrom=false">
			<view class="dlgWp">
				<u-sticky bgColor="#fff">
					<u-tabs :list="tabsList" @change="changeTabs" :activeStyle="{color:'#276AEE',fontWeight: 600}"
						lineColor="#276AEE" lineWidth="48rpx" lineHeight="4rpx"
						:inactiveStyle="{color:'#1D2129',fontWeight: 600}">
					</u-tabs>
				</u-sticky>
				<!-- 手动添加人 -->
				<view v-if="currentTabs==0">
					<view class="handleWp">
						<view class="formWp">
							<u--form :model="handleFrom" labelPosition="top" ref="handleFrom" :rules="handleRules"
								labelWidth="120" errorType="toast">
								<u-form-item label="姓名：" borderBottom :required="true" prop="userName">
									<u--input maxlength="10" border="none" v-model="handleFrom.userName"
										placeholder="请输入姓名"></u--input>
								</u-form-item>
								<u-form-item label="手机：" borderBottom>
									<u--input maxlength="13" border="none" v-model="handleFrom.mobile" type='number'
										placeholder="请输入手机号"></u--input>
								</u-form-item>
							</u--form>
						</view>
						<view class="submitBtnWp">
							<view style="width: 300rpx;">
								<u-button type="primary" :plain="true" text="取消" @click="showHandleFrom=false">
								</u-button>
							</view>
							<view style="width: 300rpx;">
								<u-button type="primary" text="确定" @click="handleAddMember">
								</u-button>
							</view>

						</view>
					</view>
				</view>
				<!-- 名片夹添加人 -->
				<view v-else>
					<view class="moreListWp">
						<view class="moreItem" v-for="(item,index) in friendList" :key="index"
							@click.stop="selectFriend(item)">
							<view class="left">
								<img :src="item.head" v-if="item.head" alt="" class='leftImgWp'>
								<u-image v-else
									src="https://file.casugn.com/storecompcard/temp/avatar_1682582523631.png"
									width="80rpx" height="80rpx" alt=""></u-image>
							</view>
							<view class="right">
								<view>
									<text class="name"> {{item.name?item.name:''}}</text>
								</view>
								<view class="company">
									{{item.company?item.company:''}}
								</view>
							</view>
						</view>
					</view>

				</view>

			</view>
		</u-popup>
		<!-- 约饭人员邀请弹窗 -->
		<u-popup :show="showLastNextMeetDlg" @close="showLastNextMeetDlg = false" mode="bottom" :round="10">

		</u-popup>

	</view>
</template>

<script>
	import {
		defaultHead
	} from '@/config/staticConfig.js'
	import baseConfig from '@/config/baseUrl.js'
	const chooseLocation = requirePlugin('chooseLocation');
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				defaultHead,
				isEdit: false,
				partyInfo: {},
				membersList: [],
				showRemark: false,
				modelInfo: {},
				labelData: {},
				form: {
					societyAbility: '',
					industryAbility: '',
					mobile: '',
					companyName: '',
					botany: '',
					hobby: ''
				},
				rules: {
					// 字段名称
					mobile: [{
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				showHandleFrom: false, //手动添加表单显示
				startTime: Date.now(),
				handleFrom: {
					userName: '',
					partyTime: '',
					remark: ''
				},
				handleRules: {
					userName: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}, ],
				},
				tabsList: [{
						name: '手动添加'
					},
					{
						name: '名片夹选择'
					},
				],
				currentTabs: 0,
				friendList: [],
				showLastNextMeetDlg: false, // 显示近期约饭弹窗

			}
		},
		onLoad(opt) {
			console.log(opt);
			uni.showLoading({
				title: '加载中'
			})
			if (opt.id) {
				this.groupInfoId = opt.id
				this.queryPartyInfo()
			}
			this.getFriendList()
		},

		onReady() {
			this.$refs.handleFrom.setRules(this.handleRules)

		},
		computed: {
			...mapGetters(['userInfo']),
		},
		methods: {
			// 添加人员到近期约饭列表
			addNextMeetList(item) {
				console.log(item);
				//弹窗添加邀约原因
				uni.showModal({
					title: '添加该宾客到近期约饭列表?',
					placeholderText: '请先输入约饭备注',
					editable: true,
					success: async (res) => {
						if (res.confirm && res.content) {
							if (!res.content) {
								return uni.showToast({
									title: '请先输入约饭备注',
									icon: 'error'
								});
							}
							console.log(item, '添加人员到近期约饭列表');
							let payload = {
								createBy: this.userInfo.openId,
								isDel: 0,
								membersId: item.membersId, //组局成员Id,
								openId: item.openId, //组局成员openId
								type: 1, //来源 1 组局 2 手填
								userName: item.userName, //组局成员姓名
								remark: res.content, //约饭原因
								photo: item.photo,
								mobile: item.mobile
							}
							let res2 = await this.$api.addMeetMembers(payload)
							if (res2.success) {
								uni.showToast({
									title: res2.message,
									icon: 'none'
								});
							} else {
								uni.showToast({
									title: res2.message,
									icon: 'none'
								});
							}


						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})

			},
			setRemark(item) {
				console.log(item);
				this.modelInfo = item
				this.form = {}
				this.showRemark = true
				this.labelData = {}

			},
			changeTabs(e) {
				this.currentTabs = e.index
			},
			//获取好友列表
			async getFriendList() {
				let payload = {
					openId: this.userInfo.openId,
					isDel: 0
				}
				let res = await this.$api.queryCardByCondition(payload) //获取好友列表
				if (res.success && res.result.length > 0) {
					// console.log(res.result, '获取好友列表');
					this.friendList = res.result
				} else {
					this.friendList = []
				}
			},
			addHandleFromShow() {
				this.showHandleFrom = true
			},
			//手动添加人员
			handleAddMember() {
				this.$refs.handleFrom.validate().then(async res1 => {
					let payload = {
						...this.handleFrom,
						createType: 1, //手动输入
						groupId: this.groupInfoId,
					}
					let res = await this.$api.exitMgGroupMembers(payload)
					if (res.success) {
						this.handleFrom = {}
						this.showHandleFrom = false
						this.queryPartyInfo()
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				}).catch(errors => {
					uni.$u.toast('请输入姓名')
				})

			},
			async selectFriend(item) {
				console.log(item, '添加名片中的人加入组局');
				if (!item) {
					return uni.showToast({
						title: '添加人员失败',
						icon: 'none'
					});
				}
				//添加校验 如果在组局名单中就不添加 
				let result = this.partyInfo.membersList.some(i => {
					return i.openId === item.friendOpenId
				})
				if (result) {
					return uni.showToast({
						title: '已邀请过该位宾客',
						icon: 'none'
					});
				}
				let payload = {
					createType: 0,
					groupId: this.groupInfoId,
					userName: item.name,
					photo: item.head,
					openId: item.friendOpenId,
					mobile: item.mobile
				}

				let res = await this.$api.exitMgGroupMembers(payload)
				if (res.success) {
					this.showHandleFrom = false
					this.queryPartyInfo()
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			async editRemark(item) {
				console.log(item, '编辑remark item 数据');
				this.modelInfo = item
				//根据标签id查询出来标签信息
				let res = await this.$api.queryGroupLabelById(item.labelId)
				if (res.success) {
					this.form = res.result
					this.showRemark = true
					this.isEdit = true
					this.labelData = res.result

				} else {
					this.form = {}
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			async goToFriendMainPage(item) {
				console.log(item);
				if (item.openId.length != 28) {
					return uni.showToast({
						title: '该宾客暂无名片',
						icon: 'none'
					});

				}
				let res2 = await this.$api.queryCurrentCardByOpenId({
					openId: item.openId
				})
				if (res2.success) {
					console.log(res2.result, '通过自己的openId查询名片信息');
					let cardId = res2.result.id
					uni.navigateTo({
						url: `/pagesCard/friendMainPage/friendMainPage?cardId=${cardId}`
					})
				}

			},


			//提交备注
			async submitRemark() {
				// this.$refs.uForm.validate().then(async res => {
				// 	console.log('校验通过', this.form);
				// }).catch(errors => {
				// 	console.log('校验失败');
				// })
				//添加校验 this.form 对象不为空
				let arr = Object.keys(this.form)
				if (arr.length == 0) {
					return uni.showToast({
						title: '请输入内容',
						icon: 'none'
					});
				}


				let payload = {
					...this.form,
					bussinessCardId: this.userInfo.id,
					groupInfoId: this.groupInfoId,
					groupMembersId: this.modelInfo.membersId,
					createBy: this.userInfo.openId,
					updateBy: this.userInfo.openId,

				}
				let res2 = await this.$api.addPartyMembersTag(payload)
				if (res2.success) {
					console.log(res2.result);
					this.showRemark = false
					this.isEdit = false
					this.modelInfo = {}
					this.form = {}
					this.queryPartyInfo()
				} else {
					uni.showToast({
						title: res2.message,
						icon: 'none'
					});
				}
			},
			//提交编辑
			async editSubmitRemark() {
				let payload = {
					...this.form,
					id: this.labelData.id,
					bussinessCardId: this.userInfo.id,
					groupInfoId: this.groupInfoId,
					groupMembersId: this.modelInfo.membersId,
					createBy: this.userInfo.openId,
					updateBy: this.userInfo.openId,
				}
				let res = await this.$api.editGroupLabel(payload)
				if (res.success) {
					console.log(res.result);
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					this.showRemark = false
					this.isEdit = false
					this.modelInfo = {}
					this.form = {}
					this.labelData = {}
					this.queryPartyInfo()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}


			},
			// 根据id 查询组局信息
			async queryPartyInfo() {
				uni.showLoading({
					title: '查询中'
				})
				let payload = {
					groupId: this.groupInfoId,
					openId: this.userInfo.openId
				}
				let res = await this.$api.queryDetailByGroupId(payload)
				if (res.success) {
					// console.log(res.result, 'res.result');
					this.partyInfo = res.result
					let arr = res.result.membersList.map((item, index) => {
						item.friendOpenId = item.openId
						item.name = item.userName
						item.head = item.photo ? item.photo : this.defaultHead
						return item
					})
					this.membersList = JSON.parse(JSON.stringify(arr))
				} else {
					this.partyInfo = {}
					this.membersList = []
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}

				setTimeout(() => {
					uni.hideLoading()
				}, 50)

			},
		}
	}
</script>

<style lang="scss" scoped>
	.partyInfoWp {
		min-height: 100vh;
		position: relative;
		padding-top: 1rpx;
		padding-bottom: 50rpx;

		.paddingBar {
			width: 100%;
			height: 30rpx;
			margin: 30rpx 0;
			background-color: #F7F8FA;
		}

		.bgImg {
			width: 750rpx;
			height: 500rpx;
			position: absolute;
			top: -45rpx;
			left: 0;
			z-index: -1;
			clear: both;
		}

		.headWP {
			background-color: #fff;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			margin-top: 200rpx;
			padding-top: 60rpx;

			.partyItemMain {
				margin: 0 30rpx;

				.infoItem {
					display: flex;
					align-items: center;
					margin-top: 16rpx;
					width: 100%;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #4E5969;
					line-height: 39rpx;

					.infoName {
						margin-left: 16rpx;
					}

				}
			}

			.memberWp {
				margin: 0 30rpx;

				.memberItemTitleWp {
					display: flex;

					align-items: center;
					justify-content: space-between;

					.memberItemTitle {
						flex: 1;
						height: 96rpx;
						font-size: 30rpx;
						font-weight: 600;
						color: #1D2129;
						line-height: 96rpx;
					}

					.memberItemNumber {
						width: 130rpx;
						height: 58rpx;


					}


				}



				.memberItem {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30upx 0;
					background: #FFFFFF;
					border-bottom: 1rpx solid #eee;

					.left {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 438rpx;

						.userNameWp {
							margin-left: 30rpx;
							width: 440rpx;
							height: 96rpx;

							.userName {
								height: 44rpx;
								font-size: 30rpx;
								font-weight: 600;
								color: #1D2129;
								line-height: 45rpx;

								.type1 {
									margin-left: 30rpx;
									display: inline-block;
									text-align: center;
									width: 88rpx;
									height: 36rpx;
									background: #FFECE8;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
									font-size: 22rpx;
									font-weight: 400;
									color: #F53F3F;
									line-height: 36rpx;

								}

								.type2 {
									margin-left: 30rpx;
									display: inline-block;
									text-align: center;
									width: 88rpx;
									height: 36rpx;
									background: #E8FFEA;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
									font-size: 24rpx;
									font-weight: 400;
									color: #00B42A;
									line-height: 36rpx;

								}

							}

							.phone {
								margin-top: 16rpx;
								height: 40rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: #86909C;
								line-height: 39rpx;

							}
						}

					}

					.right {

						.text {
							text-align: center;
							width: 120rpx;
							height: 56rpx;
							background: #E9F0FD;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-size: 28rpx;
							color: #276AEE;
							line-height: 56rpx;
						}


					}

				}

			}

			.remarkWp {
				margin: 0 30rpx;

				.title {
					height: 96rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 96rpx;
				}

				.content {
					font-size: 28rpx;
					font-weight: 400;
					color: #4E5969;
					line-height: 39rpx;
				}
			}


			.submitBtnWp {
				display: flex;
				justify-content: space-between;
				margin: 30upx;

				.submitBtn {
					margin: 30upx;
					flex: 1;
					height: 88rpx;
					font-size: 30rpx;
					font-weight: 400;
					background-color: #e9f0fd;
					color: #276AEE;
					line-height: 88rpx;
					text-align: center;

					&:hover {
						background-color: #fff;
					}

				}

				.agree {
					background-color: #276AEE;
					color: #fff;

					&:hover {
						background-color: #2873fd;

					}
				}
			}


		}
	}

	.remarkBody {
		height: 60vh;
		padding: 30rpx;
		overflow: auto;

		.remarkBodytitle {
			text-align: center;
		}

		.personInfo {
			margin: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 438rpx;

			.userNameWp {
				margin-left: 30rpx;
				width: 440rpx;
				height: 96rpx;

				.userName {
					height: 44rpx;
					font-size: 30rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 45rpx;

				}

				.phone {
					margin-top: 16rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #86909C;
					line-height: 39rpx;

				}
			}

		}

		.title {
			width: 100%;
			height: 80rpx;
			line-height: 60rpx;
			text-align: center;
		}

		.makeSurebutton {
			margin: 30rpx auto;
		}
	}

	//弹窗样式
	.dlgWp {
		margin: 30rpx;
		padding-bottom: 40rpx;
		height: 50vh;
		overflow: auto;

		.handleWp {
			width: 100%;

			.submitBtnWp {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 30rpx;
				padding: 30rpx 0;
				overflow: hidden;
				margin-bottom: 40rpx;
			}
		}


		.title {
			text-align: center;
			color: #333333;

		}



		.moreListWp {
			width: 100%;
			height: 100vh;

			.moreItem {
				display: flex;
				margin: 30upx 0;
				padding-bottom: 15upx;
				border-bottom: 1upx solid #eee;

				.left {
					padding-right: 30upx;

					.leftImgWp {
						width: 80upx;
						height: 80upx;
					}
				}

				.right {
					.name {
						font-size: 28rpx;
						font-weight: 600;
						color: #1D2129;
						line-height: 45rpx;
					}

					.position {
						margin-left: 32rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #4E5969;

					}

					.title {
						padding-left: 22upx;
						font-size: 18upx;
						font-weight: 400;
						color: #666666;
						line-height: 36upx;
					}

					.company {
						margin-top: 12upx;
						font-size: 24upx;
						font-weight: 400;
						color: #333333;
						line-height: 24upx;
					}
				}
			}


		}
	}
</style>